<template>
<div>
    <div>
    <el-card class="box-card" style="margin-left: auto; margin-right: auto;">
        <div slot="header" class="clearfix">
            <span>访客管理</span>
        </div>
        <div>
          <span style=" float: left; margin-top: 10px;">访客姓名</span>
          <el-input style="float: left; width: 20%; margin-bottom: 20px;  margin-left: 20px;" v-model="visitorsName"></el-input>
          <el-button type="primary" icon="el-icon-circle-plus" style="float: right; " @click="activitySelect(visitorsName)">查询</el-button>
        </div>
    </el-card>
    <el-card class="box-card" style="margin-left: auto; margin-right: auto;">
        <div slot="header" class="clearfix">
            <span>访客列表</span>
        </div>
        <div>
            <el-table
            :data="InfoList"
            style="width: 100%">
            <el-table-column
                prop="communityName"
                label="小区名字"
                width="150">
            </el-table-column>
            <el-table-column
                prop="visitorsName"
                label="访客姓名"
                width="150">
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态"
                width="150">
            </el-table-column>
            <el-table-column
                prop="visitorsAge"
                label="访客性别"
                width="150">
            </el-table-column>
            <el-table-column
                prop="visitorsPhone"
                label="访客手机号码"
                width="150">
            </el-table-column>
            <el-table-column
                prop="accessTime"
                label="访问时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="duration"
                label="时长"
                width="150">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="200">
                <template slot-scope="scope">
                    <!-- <el-button  type="text" size="small">审核</el-button> -->
                    <el-button  type="text" size="small" @click="Update(scope.row),dialogFormVisible= true">显示详情</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal">
            </el-pagination>
        </div>
    </el-card>
  </div>
  <div>
        <el-dialog title="详细信息" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="访问小区" >
                <el-input v-model="ruleForm.communityName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="车牌号" >
                <el-input v-model="ruleForm.visitorsLicencePlate" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="访客姓名" >
                <el-input v-model="ruleForm.visitorsName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="访客性别" >
                <el-input v-model="ruleForm.visitorsAge" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="访客手机号" >
                <el-input v-model="ruleForm.visitorsPhone" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="访问时间" >
                <el-input v-model="ruleForm.accessTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="时长（单位：小时）" >
                <el-input v-model="ruleForm.duration" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="结束时间" >
                <el-input v-model="ruleForm.endTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="是否驱车" >
                <el-input v-model="ruleForm.drive" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="访问状态" >
                <el-input v-model="ruleForm.state" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  data() {
        return {
          tableData: [],
          InfoList:[],
          input: '',
          dialogFormVisible: false,
          dialogFormVisible1: false,
          ruleForm:{
            visitorsRecordId:'',
            visitorsLicencePlate:'',
            visitorsAge:'',
            visitorsName:'',
            visitorsPhone:'',
            accessTime:'',
            duration:'',
            endTime:'',
            drive:'',
            state:'',
            passUrl:'',
            createTime:'',
            updateTime:'',
            communityName:''
          },
          ruleForm1:{
            activityTheme:'',
          },
          pageTotal: 0, // 总数
          pageNum: 1, // 页数
          pageSize: 2, // 条数
          currentPage: 1, // 分页中当前页变量
          options: [
            
          ],
          value: '',
          visitorsName:'',
        }
    },
    methods: {
        Update(data){
              this.ruleForm.visitorsLicencePlate=data.visitorsLicencePlate
              this.ruleForm.visitorsAge=data.visitorsAge
              this.ruleForm.visitorsName= data.visitorsName
              this.ruleForm.visitorsPhone= data.visitorsPhone
              this.ruleForm.accessTime=data.accessTime
              this.ruleForm.duration=data.duration
              this.ruleForm.communityName=data.communityName
              this.ruleForm.endTime=data.endTime
              this.ruleForm.drive=data.drive
              this.ruleForm.state=data.state
          },
        handleSizeChange(val) {
          this.pageSize = val
          this.visitorSelect()
        },
        handleCurrentChange(val) {
          this.pageNum =val
          this.visitorSelect()
        },
        visitorSelect() {
            // 获取所有用户信息
            this.$axios.get("http://localhost:9000/serverchy/Visitor/visitorSelect",{
              params:{
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                visitorsName:this.visitorsName
              }
          }).then((res) => {
              this.InfoList = res.data.list
              this.pageTotal = res.data.total
            });
        },
    },
    mounted() {
      this.visitorSelect()
    }
}
</script>

<style>
    .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1136px;
  }
</style>